<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>VML</title>
	<link rel="stylesheet" href="js/kissy/build/cssreset/reset.css"/>
	<style>
		v\: * {
			behavior:url(#default#VML);
			display:block;
			position:absolute;
		}
		#vmlc {
			background:#f2f2f2;
			width:480px;
			height:300px;
			position:relative;
			overflow:hidden;
		}
		html {
			overflow:hidden;
		}
	</style>
	<script src="js/kissy/build/kissy.js"> </script>
	<script src="js/vmlrouter.js"></script>
	<script>
	KISSY.ready(function(S){
		
		window.getContext = function(w,h){
			var cr = new S.CanvaseRouter({
				container : "#vmlc",
				width:w,
				height:h
			});
			return cr.getContext("2d");
		};
		var x = 200;
		var ctx = getContext(480,300);
		var align = ["start","end","left","right","center"];
		ctx.font = "15px tahoma,arial";
		ctx.fillStyle = "red";
		ctx.strokeStyle = "#f00";
		ctx.lineWidth = "1";
		ctx.beginPath();
		for(var i = 0; i < align.length; i++){
			ctx.textAlign = align[i];//start, end, left, right, or center
			y = (i+1)*50;
			ctx.fillText("hello text (align:"+align[i]+")",x, y );
			ctx.moveTo(x,y);
			ctx.lineTo(480,y);
		}
		ctx.stroke();
		//ctx.beginPath();
		//ctx.moveTo(0,0);
		//ctx.lineTo(400,300);
		//ctx.stroke();
	});
	</script>
</head>
<body>
	<div id="vmlc"></div>
</body>
</html>